<div class="modal-header">
    <h5 class="modal-title">防火墙配置</h5>
</div>

<div class="modal-body">

  <div class="form-group">
    <div class="col-sm-12">
      <table class="table table-bordered">
        <thead>
          <tr>
            <td>源地址</td>
            <td>目标地址</td>
            <td>协议</td>
            <td>端口号</td>
            <td>备注</td>
            <td>操作</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="rule in order.firewall.rules">
            <td>
              <input required ng-pattern="/^([0-9]{1,3}\.){3,3}[0-9]{1,3}(\/(8|16|24))?$/" ng-maxlength="15" ng-model="rule.src" type="text" class="form-control" >
            </td>
            <td>
              <input required ng-pattern="/^([0-9]{1,3}\.){3,3}[0-9]{1,3}(\/(8|16|24))?$/" ng-model="rule.target" type="text" class="form-control" >
            </td>
            <td>
              <select ng-model="rule.protocal" class="form-control">
                <option>TCP</option>
                <option>UDP</option>
                <option>ICMP</option>
              </select>
            </td>
            <td><input required ng-model="rule.port" type="number" class="form-control" ></td>
            <td><input required ng-model="rule.remark" type="text" class="form-control" ></td>
            <td><button type="button" ng-click="rmRule(rule)" class="btn btn-danger btn-xs">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- add button -->
    <p>
      <a ng-click="addRule()" class="button button-primary  button-square">
      <i class="fa fa-plus"></i></a>
    </p>
    <!-- add button -->
  </div>
</div>
